<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="../css/reset.css">
	<style>
		.head{
			display: flex;
			height: 60px;
			background-color: darkgreen;
			justify-content: space-between;
			padding: 0 25px;
			align-items: center;
			font-size: 30px;
		}
		.head span,div{
			color: #fff;
		}
		.content{
			display: flex;
		}
		.nav{
			width: 200px;
			height: calc(100vh - 60px);
			background-color: cadetblue;
		}
		.body{
			width: calc(100vw - 200px);
			height: calc(100vh - 60px);
			padding: 16px;
		}
		.nav ul{
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 22px;
		}
		.nav li{
			margin-top: 5px;
		}
		.active{
			color: darkgoldenrod;
		}
		.user{
			position: relative;
		}
		.logout{
			position: absolute;
			width: 150px;
			height: 35px;
			background-color: aqua;
			text-align: center;
			line-height: 35px;
			left: 18px;
			top: 52px;
			display: none;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<div class="head">
		<span>手机回收平台</span>
		<div class="user" >
			<span id="user-phone">15030010403</span>	
			<div class="logout" onclick="logoutEV()">退出</div>
		</div>
	</div>
	<div class="content">
		<div class="nav">
			<ul>
				<li data-url="./resource.html">资源列表</li>
				<li data-url="./client.html">C端管理</li>
				<li data-url="./brower.html">B端管理</li>
				<li data-url="./classes.html">分类管理</li>
				<li data-url="./msg.html">消息管理</li>
			</ul>
		</div>
		<div class="body">
			<iframe src="" frameborder="0" width="100%" height="100%" id="iframe"></iframe>
		</div>
	</div>
	<script src="../../public1/js/pubilc.js"></script>
	<script>
		var iframe = document.getElementById('iframe')
		var lis =  document.querySelectorAll('.nav ul li')
		var user = document.getElementById('user-phone')
		// 刚一进一面 先把资源管理页面附上console.log()
		window.onload = function(){
			/*
				检验token的有效性 TODO 
			*/
			if(!splitToken('token')){
				location.replace('./login.html')
				return
			}
			iframe.src = lis[splitToken('page') -1].getAttribute('data-url')
			lis[splitToken('page')-1].classList.add('active')
			user.innerHTML = splitToken('user')
		}
		for(var i=0;i<lis.length;i++){
			lis[i].index = i+1
			lis[i].onclick = function(){
				iframe.src =this.getAttribute('data-url')
				location.href = location.href.split("?")[0]+'?page='+this.index+"&token="+splitToken('token')+"&user="+splitToken('user')
				for(var j=0;j<lis.length;j++){
					lis[j].classList.remove('active')
				}
				this.classList.add('active')
			}
		}
		var user = document.getElementById('user-phone')
		var logout = document.getElementsByClassName('logout')[0]
		user.onmouseover = function(){
			logout.style.display='block'
		}
		logout.onmouseout = function(){
			this.style.display='none'
		}
		function logoutEV(){
			location.replace('./login.html')
		}
	
	</script>
</body>
</html>